<template>
  <div
    class="popup"
    :style="{ top: top + 'px', left: left + 'px' }"
    @mouseenter="pauseMovement"
    @mouseleave="resumeMovement"
  >
    <img src="popup-image.png" alt="Popup Image" />
    <button @click="closePopup">Close</button>
  </div>
</template>

<script>
import { defineComponent, onMounted, ref } from 'vue'

export default defineComponent({
  setup() {
    const top = ref(50)
    const left = ref(50)
    let directionX = 1
    let directionY = 1
    let isPaused = false

    const closePopup = () => {
      // 关闭弹窗逻辑
    }

    const pauseMovement = () => {
      isPaused = true
    }

    const resumeMovement = () => {
      isPaused = false
    }

    const movePopup = () => {
      if (!isPaused) {
        // 弹窗运动逻辑
        left.value += directionX
        top.value += directionY

        const screenWidth = window.innerWidth
        const screenHeight = window.innerHeight

        if (left.value <= 0 || left.value >= screenWidth - 100) {
          directionX = -directionX
        }

        if (top.value <= 0 || top.value >= screenHeight - 100) {
          directionY = -directionY
        }
      }

      requestAnimationFrame(movePopup)
    }

    onMounted(() => {
      movePopup()
    })

    return {
      top,
      left,
      onClose: closePopup,
      pauseMovement,
      resumeMovement
    }
  }
})
</script>

<style scoped>
.popup {
  position: fixed;
}
</style>
